<template>
    <div>
        <div v-if="show" class="main">
            <div class="main-content">
                <div class="tabs" :class="['tabs' + tabsIndex]">
                    <div class="tab tab1" :class="{ 'tab-active': tabsIndex == 3 }" @click="set_payVipIndex(3)">
                        财税风险检测
                    </div>
                    <div class="tab tab2" :class="{ 'tab-active': tabsIndex == 1 }" @click="set_payVipIndex(1)">
                        会员中心
                    </div>
                    <!-- <div
                        class="tab tab3"
                        :class="{ 'tab-active': tabsIndex == 2 }"
                        @click="set_payVipIndex(2)"
                    >
                        小竹叶
                    </div> -->
                </div>
                <div class="main-show">
                    <div v-show="tabsIndex == 0" class="tab-show-1">
                        <div class="title">
                            购买普通问答券
                            <div @click="alert()">使用规则></div>
                        </div>

                        <div class="coupon-list">
                            <div v-for="(item, index) in couponList" :key="index" class="coupon-item" :class="{
                                'coupon-item-active': item.id == couponId,
                            }" @click="couponClick(item)">
                                <div class="num">
                                    {{ item.unitprice }}元
                                    <i class="el-icon-close"></i>
                                    {{ item.number }}张
                                </div>
                                <div class="money">
                                    <span>￥<span style="font-size: 36px">{{
                                        item.price
                                            }}</span></span>
                                    <div>
                                        原价{{ item.unitprice * item.number }}元
                                    </div>
                                </div>
                                <div class="tip">
                                    立省{{ item.preferential }}元
                                </div>
                            </div>
                        </div>
                        <div class="title" style="margin-top: 37px">
                            购买专家问答券
                            <span>一分钟接单 · 专家解答 · 专项解答</span>
                        </div>
                        <div class="coupon-list">
                            <div v-for="(item, index) in couponList2" :key="index" class="coupon-item" :class="{
                                'coupon-item-active': item.id == couponId,
                            }" @click="couponClick(item)">
                                <div class="num">
                                    {{ item.unitprice }}元
                                    <i class="el-icon-close"></i>
                                    {{ item.number }}张
                                </div>
                                <div class="money">
                                    <span>￥<span style="font-size: 36px">{{
                                        item.price
                                            }}</span></span>
                                    <div>
                                        原价{{ item.unitprice * item.number }}元
                                    </div>
                                </div>
                                <div class="tip">
                                    立省{{ item.preferential }}元
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show="tabsIndex == 3" class="tab-show-1">
                        <div class="title">
                            购买财税风险检测次数
                            <div @click="alert()">使用规则></div>
                        </div>
                        <div class="fxjc-list">
                            <div v-for="(item, index) in couponList" :key="index" class="fxjc-item"
                                :class="{ 'fxjc-item-s': couponId == item.id }" @click="couponClick(item)">
                                <div class="name">
                                    财税风险检测次数*{{ item.num }}
                                </div>
                                <div class="moeny">
                                    <div class="m1">￥</div>
                                    <div class="m3">{{ item.amount }}</div>
                                    <div class="m2">有效期1年</div>
                                </div>
                                <div v-show="item.num == 3" class="fxjc-item-th">
                                    特惠
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show="tabsIndex == 1" class="tab-show-2">
                        <div class="member-benefits">
                            <div class="title">
                                <img src="~/assets/images/userCenter/hyqy_icon_0.png" alt="" />
                                会员权益
                            </div>
                            <div class="member-benefits-list">
                                <div class="member-benefits-item">
                                    <img src="~/assets/images/userCenter/hyqy_icon_1.png" alt="" />
                                    AI提问<span @click="alert2()">详情></span>
                                </div>
                                <div class="member-benefits-item">
                                    <img src="~/assets/images/userCenter/hyqy_icon_2.png" alt="" />
                                    普通问答
                                </div>
                                <div class="member-benefits-item">
                                    <img src="~/assets/images/userCenter/hyqy_icon_3.png" alt="" />
                                    老师在线答疑
                                </div>
                                <div class="member-benefits-item">
                                    <img src="~/assets/images/userCenter/hyqy_icon_4.png" alt="" />
                                    为您双重保障
                                </div>
                            </div>
                        </div>
                        <div class="pay-vip-redemption">
                            <div class="title">购买会员</div>
                            <div class="vip-list">
                                <div v-for="(item, index) in vipList" :key="index" class="vip-item" :class="{
                                    'vip-item-active':
                                        index == vipListIndex,
                                }" @click="vipClick(item, index)">
                                    <div class="day">
                                        <template v-if="item.day == 1">1天</template>
                                        <template v-if="item.day == 30">1个月</template>
                                        <template v-if="item.day == 365">1年</template>
                                        <template v-if="item.day == 730">2年</template>
                                    </div>
                                    <!-- <div class="remark">
                                        <template v-if="item.day == 365"
                                            >365天赠<span>66天</span></template
                                        >
                                        <template v-if="item.day == 730"
                                            >730天赠<span>100天</span></template
                                        >
                                    </div> -->
                                    <div class="money">
                                        <span>￥<span class="mmmm">{{
                                            item.discount_price
                                                }}</span></span>
                                    </div>
                                    <div class="old-money">
                                        原价{{ item.face_value }}元
                                    </div>
                                    <div class="li" v-if="item.day == 1">
                                        <span></span> 每月仅可购买1次
                                    </div>
                                    <div class="tip">
                                        立省{{
                                            Math.round(
                                                (item.face_value -
                                                    item.discount_price) *
                                                10
                                            ) / 10
                                        }}元
                                    </div>
                                </div>
                            </div>
                            <div class="title">兑换码</div>
                            <div class="redemption">
                                <el-input v-model="redemption" placeholder=""></el-input>
                                <el-button type="primary" round @click="checkCode">兑换</el-button>
                            </div>
                        </div>
                    </div>
                    <div v-show="tabsIndex == 2" class="tab-show-3">
                        <div class="bamboo-title">
                            <span class="text1">我的小竹叶：</span>
                            <img src="~/assets/images/userCenter/leaf2.png" alt="" />
                            <span v-if="userInfo" class="text2">{{
                                userInfo.money
                            }}</span>
                            <el-popover placement="bottom" width="400" trigger="click" @show="getMoneyLog">
                                <div class="detailBox">
                                    <div class="title fz20">小竹叶明细</div>
                                    <div class="boo-tabs">
                                        <div v-for="(item, index) in booTabs" :key="index" class="boo-tab" :class="{
                                            'boo-tab-active':
                                                index == booTabsIndex,
                                        }" @click="detailClick(index)">
                                            {{ item.name }}
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                    <div class="detailItem flex-between" v-for="(item, index) in detailList"
                                        :key="index">
                                        <div class="left">
                                            <div style="font-weight: bold" class="fz16 c333">
                                                {{ item.memo }}
                                            </div>
                                            <div class="fz12 c999">
                                                {{ item.createtime }}
                                            </div>
                                        </div>
                                        <div style="font-weight: bold" :class="[
                                            {
                                                color1:
                                                    item.money_status == 1,
                                                color2:
                                                    item.money_status == 2,
                                                color3:
                                                    item.money_status == 3,
                                            },
                                        ]" class="fz18">
                                            {{ item.money }}
                                        </div>
                                    </div>
                                </div>
                                <div slot="reference" class="buttonttt">
                                    明细
                                </div>
                            </el-popover>
                        </div>
                        <div class="line"></div>
                        <div class="title">小竹叶充值：</div>
                        <div class="input">
                            <span>￥</span>
                            <el-input v-model="amount" type="number" placeholder="手动输入充值金额"></el-input>
                            <div class="buttonttt" @click="amountBut">确认</div>
                        </div>
                        <div class="combo-list">
                            <div v-for="(item, index) in comboList" :key="index" class="combo-item" :class="{
                                'combo-item-active': comboIndex == index,
                            }" @click="comboClick(index)">
                                <div class="moeny">
                                    ￥<span>{{ item.amount }}</span>
                                </div>
                                <div class="combo">
                                    <img src="~/assets/images/userCenter/leaf2.png" alt="" />
                                    {{ item.amount * 100 }}小竹叶
                                </div>
                                <div class="tip">加赠{{ item.extra }}</div>
                            </div>
                        </div>
                        <div class="combo-tip">1元等于100小竹叶</div>
                    </div>
                    <div class="pay-code">
                        <div class="pay-code-title">立即购买</div>
                        <div class="pay-code-type">
                            <img src="~/assets/images/userCenter/pay-wx.png" class="icon" alt="" />
                            <img src="~/assets/images/userCenter/pay-zfb.png" class="icon" alt="" />
                            <span>微信/支付宝支付</span>
                        </div>
                        <div v-loading="qrLoading" :element-loading-text="loadingText" class="pay-code-code">
                            <vue-qr ref="qrCode" :text="qrText" :logoSrc="logoSrc" :color-dark="randomColor" :margin="0"
                                width="150" height="150"></vue-qr>
                        </div>
                        <div class="pay-number">
                            实付:<span>￥<span style="font-size: 24px">{{
                                getMoney.price
                                    }}</span></span>
                        </div>
                        <div v-show="tabsIndex == 1" class="old-price">
                            原价：{{ getMoney.price2 }}元
                        </div>
                        <div class="pay-code-agreement">
                            支付即同意&nbsp;《<span @click="goPayXieyi">支付协议</span>》<template v-if="tabsIndex == 1">《<span
                                    @click="goxieyi(2)">会员协议</span>》</template>
                        </div>
                    </div>
                </div>

                <i class="el-icon-close close-pay" @click="set_payVipShow(false)"></i>
            </div>
        </div>

        <!-- 兑换成功 -->
        <div class="codeSuccess">
            <el-dialog :visible.sync="codeSuccessShow" width="25%">
                <img class="codeIcon" src="~/assets/images/userCenter/duihuan_1.png" alt="" />
                <div class="fz26 c333 mt30">{{ codeName }}</div>
                <div class="fz20 c333 mt30 mb20">恭喜您，兑换成功</div>
                <div class="codeSuccess-but">
                    <el-button type="primary" plain round @click="codeTypeClick">
                        <template v-if="codeType == 1">前往我的卡包</template>
                        <template v-if="codeType == 2">前往我的卡包</template>
                        <template v-if="codeType == 3">确定</template>
                        <template v-if="codeType == 4">确定</template>
                    </el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 兑换失败 -->
        <div class="codeSuccess">
            <el-dialog :visible.sync="codeFailShow" width="25%">
                <img class="codeIcon" src="~/assets/images/userCenter/duihuan_0.png" alt="" />
                <div class="fz20 c333 mt30 mb20">抱歉，兑换失败</div>
            </el-dialog>
        </div>

        <!-- 傻不愣登的熊猫动画 -->
        <div v-if="showPandaChannelEdition" class="PandaChannelEdition">
            <!-- <el-image
                style="width: 100%; height: 100%"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/PandaChannelEdition.gif"
                fit="cover"
                @load="PandaChannelEditionLoad"
            ></el-image> -->
            <video style="width: 100%; height: 100%" id="fullscreen-video" autoplay :controls="false"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/PandaChannelEdition.mp4"
                @loadedmetadata="PandaChannelEditionLoad">
                <source src="your-video-file.mp4" type="video/mp4" />
                Your browser does not support the video tag.
            </video>

            <i class="el-icon-circle-close" @click.stop="ClosePandaChannelEdition"></i>
        </div>
        <div v-if="showPandaChannelEdition2" class="PandaChannelEdition2">
            <img id="imagedownload" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/PandaChannelEdition2.png"
                class="con-img" alt="" />
            <div class="buts">
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/PandaChannelEdition2-but1.png" alt=""
                    @click="PandaChannelEdition2Close" />
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/PandaChannelEdition2-but2.png" alt=""
                    @click="goxiazai" />
            </div>
        </div>
    </div>
</template>

<script>
function getQueryParam(name, url) {
    name = name.replace(/[\[\]]/g, "\\$&"); // 替换方括号以正确处理正则表达式的特殊字符
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
import { goTop } from "@/assets/utils/utils.js";
import { getComboList } from "@/assets/api/GPT";
import {
    pc_buy_vip_code,
    pc_buy_coupon_code,
    pc_buy_chashuibao,
    pc_buy_recharge_code,
    checkCode,
    WendacouponGetList,
    chashuibaorecharge_getComboList,
    getMoneyLog,
    getComboList2,
    WendacouponcouponPaydetail,
    gptrecharge_paydetail,
    recharge_paydetail,
    chashuibaorecharge_chashuibao_paydetail,
} from "@/assets/api/userCenterApi";
import { mapState, mapActions, mapMutations } from "vuex";

import { getanalysedata2 } from "@/assets/api/indexApi.js";

export default {
    name: "payVip",
    props: {
        show: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            vipList: [],
            vipListIndex: 0,

            couponList: [],
            couponList2: [],
            couponId: 0,
            couponObj: null,

            booTabs: [
                {
                    name: "全部",
                    status: "0",
                },
                {
                    name: "获取",
                    status: "1",
                },
                {
                    name: "兑换",
                    status: "2",
                },
                {
                    name: "失效",
                    status: "3",
                },
            ],
            booTabsIndex: 0,
            detailList: [],
            amount: "",
            comboList: [],
            comboIndex: null,

            redemption: "",
            codeSuccessShow: false,
            codeFailShow: false,
            codeName: "",
            codeType: "",

            qrText: "",
            logoSrc: "",
            randomColor: "black",
            qrLoading: true,

            timer: null,

            loadingText: "",
            showPandaChannelEdition: false,
            showPandaChannelEditionTime: null,

            showPandaChannelEdition2: false,
        };
    },
    mounted() { },
    beforeMount() {
        this.$options.components["vue-qr"] = () => import("vue-qr");
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            tabsIndex: (state) => state.payVipIndex,
        }),
        getMoney: function () {
            let moeny = {
                price: 0,
                price2: 0,
            };
            if (this.tabsIndex == 1 && this.vipList.length != 0) {
                moeny.price = this.vipList[this.vipListIndex].discount_price;
                moeny.price2 = this.vipList[this.vipListIndex].face_value;
            } else if (this.tabsIndex == 0 && this.couponObj) {
                moeny.price = this.couponObj.price;
                moeny.price2 = this.couponObj.unitprice * this.couponObj.number;
            } else if (this.tabsIndex == 3 && this.couponObj) {
                moeny.price = this.couponObj.amount;
                moeny.price2 = this.couponObj.amount;
            } else if (this.tabsIndex == 2 && this.comboList.length > 0) {
                if (this.comboIndex == null) {
                    moeny.price = this.amount;
                } else {
                    moeny.price = this.comboList[this.comboIndex].amount;
                }
            }
            return moeny;
        },
    },
    watch: {
        tabsIndex: function (n) {
            this.tabsClick();
        },
        show: function (n) {
            if (!n && this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
            if (n) {
                const token = window.localStorage.getItem("token");
                if (token) this.getVipList();
                this.getUserInfo();
            }
        },
    },
    methods: {
        ...mapActions("common", ["getUserInfo"]),
        ...mapMutations("common", ["set_payVipShow", "set_payVipIndex"]),

        // 小猪儿明细
        async getMoneyLog() {
            let res = await getMoneyLog({
                status: this.booTabs[this.booTabsIndex].status,
            });
            if (res.code == 1) {
                this.detailList = res.data;
            }
        },
        detailClick(index) {
            this.booTabsIndex = index;
            this.getMoneyLog();
        },

        // 倒计时关掉那个熊猫
        PandaChannelEditionLoad() {
            let that = this;
            this.showPandaChannelEditionTime = setTimeout(() => {
                that.showPandaChannelEdition = false;
                that.showPandaChannelEditionTime = null;
                // that.showPandaChannelEdition2 = true;
            }, 8000);
        },

        ClosePandaChannelEdition() {
            if (this.showPandaChannelEditionTime) {
                clearTimeout(this.showPandaChannelEditionTime);
                this.showPandaChannelEditionTime = null;
            }
            this.showPandaChannelEdition = false;
            this.showPandaChannelEdition2 = true;
        },

        tabsClick() {
            if (this.tabsIndex == 0) {
                this.WendacouponGetList();
            } else if (this.tabsIndex == 1) {
                this.getVipList();
            } else if (this.tabsIndex == 2) {
                this.getComboList();
            } else if (this.tabsIndex == 3) {
                getanalysedata2({
                    m_id: 17,
                    type: 1,
                    describe: "风险检测套餐",
                    code: "PW2",
                });
                this.WendacouponGetList2();
            }
        },

        // 获取小竹叶
        async getComboList() {
            const res = await getComboList2({});
            if (res.code == 1) {
                this.comboList = res.data;
                this.comboClick(0);
            }
        },
        comboClick(index) {
            this.comboIndex = index;
            this.pc_buy_vip_code(this.comboList[this.comboIndex].id);
        },
        amountBut() {
            if (!this.amount) {
                this.$message("请输入充值金额");
            }
            this.comboIndex = null;
            this.pc_buy_vip_code();
        },

        // 获取问答券
        async WendacouponGetList() {
            const res = await WendacouponGetList({});
            if (res.code == 1) {
                this.couponList = [];
                this.couponList2 = [];
                for (let item of res.data) {
                    if (item.type == 1) this.couponList.push(item);
                    if (item.type == 2) this.couponList2.push(item);
                }
                this.couponClick(this.couponList[0]);
            }
        },

        // 茶水报
        async WendacouponGetList2() {
            const res = await chashuibaorecharge_getComboList({});
            if (res.code == 1) {
                this.couponList = res.data;
                this.couponClick(this.couponList[0]);
            }
        },

        couponClick(item) {
            this.couponId = item.id;
            this.couponObj = item;
            this.pc_buy_vip_code(item.id);
        },

        // 切换会员类型
        async getVipList() {
            const res = await getComboList({});
            if (res.code == 1) {
                let index = localStorage.getItem("payvipindex");
                if (index) {
                    index = Number(index)
                    this.vipListIndex = index;
                    this.vipClick(res.data[index], index);
                    localStorage.removeItem("payvipindex");
                } else {
                    this.vipListIndex = 0;
                    this.vipClick(res.data[0], 0);
                }
                this.vipList = res.data;
            }
        },
        vipClick(item, index) {
            this.qrLoading = true;
            this.vipListIndex = index;
            this.pc_buy_vip_code(item.id);
        },

        async pc_buy_vip_code(id) {
            var res = null;
            this.loadingText = "拼命生成二维码中";
            this.loadingSpinner = "";
            if (this.tabsIndex == 0) {
                res = await pc_buy_coupon_code({
                    combo_id: id,
                });
            }
            if (this.tabsIndex == 3) {
                res = await pc_buy_chashuibao({
                    combo_id: id,
                });
            }
            if (this.tabsIndex == 1) {
                // if (this.vipListIndex == 0 && this.userInfo.onemonth_vip == 1) {
                //     this.$alert(
                //         "本月已体验会员1天，升级为月度会员，尽享更多精彩！",
                //         "提示",
                //         {
                //             confirmButtonText: "确定",
                //             closeOnClickModal: true,
                //         }
                //     );
                //     // this.loadingText = "一天会员每月仅可购买1次";
                //     return;
                // }
                res = await pc_buy_vip_code({
                    combo_id: id,
                });
            }
            if (this.tabsIndex == 2) {
                let params = {
                    combo_id: "",
                };
                if (this.comboIndex == null) params.money = this.amount;
                else params.combo_id = id;
                res = await pc_buy_recharge_code(params);
            }

            if (res.code == 1) {
                this.qrText = res.data;
                this.qrLoading = false;

                let that = this;
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }

                if (this.show)
                    this.timer = setInterval(() => {
                        that.getPaydetail(getQueryParam("order_sn", res.data));
                    }, 3000);
            }
        },

        // 轮询获取订单支付
        async getPaydetail(order_sn) {
            let res = null;
            if (this.tabsIndex == 0) {
                res = await WendacouponcouponPaydetail({
                    order_no: order_sn,
                });
            }
            if (this.tabsIndex == 1) {
                res = await gptrecharge_paydetail({
                    order_no: order_sn,
                });
            }
            if (this.tabsIndex == 2) {
                res = await recharge_paydetail({
                    order_no: order_sn,
                });
            }
            if (this.tabsIndex == 3) {
                res = await chashuibaorecharge_chashuibao_paydetail({
                    order_no: order_sn,
                });
            }
            if (res && res.code == 1 && res.data && res.data.pay_time) {
                clearInterval(this.timer);
                this.timer = null;
                if (this.tabsIndex == 1) {
                    this.showPandaChannelEdition = true;
                    this.set_payVipShow(false);
                }
                if (this.tabsIndex == 3) {
                    this.getUserInfo();
                    this.$confirm("财税风险检测次数购买成功", "提示", {
                        confirmButtonText: "知道了",
                        closeOnClickModal: false,
                        closeOnPressEscape: false,
                        closeOnHashChange: false,
                    });
                }
            }
        },

        PandaChannelEdition2Close() {
            this.showPandaChannelEdition2 = false;
            this.$confirm(
                "为了您更精准的享受政策解读及推送的权益请务必完善以下信息。",
                "尊敬的小竹全站通会员",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "知道了",
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    closeOnHashChange: false,
                }
            )
                .then(() => {
                    this.$router.push({
                        path: "/user/myset",
                    });
                })
                .catch(() => { });
            if (this.tabsIndex != 0) {
                this.getUserInfo();
            }
        },

        async checkCode() {
            if (this.redemption == "") {
                this.$message("请填写兑换码");
                return;
            }
            const res = await checkCode({ code: this.redemption });
            console.log("兑换码结果", res);
            //查看兑换类型  1:普通问答券 2：专家问答券 3：1个月问答会员
            if (res.code == 1) {
                this.codeType = res.data.type;
                if (res.data.type == 1) {
                    this.codeName = "普通问答券";
                } else if (res.data.type == 2) {
                    this.codeName = "专家问答券";
                } else if (res.data.type == 3) {
                    this.codeName = "全站通会员1年";
                } else if (res.data.type == 4) {
                    this.codeName = "全站通会员2年";
                }
                this.codeSuccessShow = true;
                this.redemption = "";
                this.getUserInfo();
            } else {
                this.codeFailShow = true;
                this.redemption = "";
            }
        },

        codeTypeClick() {
            if (this.codeType == 3 || this.codeType == 4) {
                this.codeSuccessShow = false;
            } else {
                this.codeSuccessShow = false;
                this.set_payVipShow(false);
                this.$router.push({
                    path: "/user/mycoupon",
                });
            }
        },

        goxieyi(index) {
            this.set_payVipShow(false);
            this.$router.push({
                path: "/useragreement?index=" + index,
            });
        },

        goxiazai() {
            const image = document.getElementById("imagedownload");
            const link = document.createElement("a");
            link.href = image.src;
            link.download = "downloaded_image.jpg"; // Set the desired file name
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },

        goPayXieyi() {
            window.open("https://api.xiaozhucaishui.com/xieyi/pay.html");
        },

        alert() {
            this.$alert(
                `1.本套餐仅限小竹财税平台内使用；<br/>
                2.本套餐一经购买，不得退还；<br/>
                3.本券需在相应活动期间内使用，逾期不补发；<br/>
                4.如发现用户违规获取套餐，平台有权对其冻结并收回；<br/>
                5.本套餐使用最终解释权归小竹财税平台所有。`,
                "使用规则",
                {
                    dangerouslyUseHTMLString: true,
                    showConfirmButton: false,
                    customClass: "alertPayVip0",
                }
            );
        },

        alert2() {
            this.set_payVipShow(false);
            this.$router.push({
                path: "/vipcenter",
            });
            // this.$alert(
            //     `
            //         <div class="alertPayVip1-h1">AI提问：<span>小竹AI会员期内无限次数免费使用。能够迅速提供财税咨询，无需等待人工回复。</span></div>
            //         <div class="alertPayVip1-h1">普通问答：<span>普通问答会员期内无限次数免费使用。财务人员实时在线答疑:</span></div>
            //         <div class="alertPayVip1-table">
            //             <div class="th">
            //                 <div class="tb">名称</div>
            //                 <div class="tb">注册用户</div>
            //                 <div class="tb">会员</div>
            //             </div>
            //             <div class="th">
            //                 <div class="tb">价格</div>
            //                 <div class="tb">-</div>
            //                 <div class="tb">199/年</div>
            //             </div>
            //             <div class="th">
            //                 <div class="tb">权益</div>
            //                 <div class="tb">10/次</div>
            //                 <div class="tb">无限次</div>
            //             </div>
            //         </div>
            //     `,
            //     "使用规则",
            //     {
            //         dangerouslyUseHTMLString: true,
            //         showConfirmButton: false,
            //         customClass: "alertPayVip1",
            //     }
            // );
        },
    },
};
</script>
<style lang="scss">
.alertPayVip0 {
    background: linear-gradient(180deg, #fdedd2 0%, #ffffff 26%);
    border-width: 0;
}

.alertPayVip1 {
    background: linear-gradient(180deg, #d9eeff 0%, #ffffff 26%);
    border-width: 0;
}

.alertPayVip1-h1 {
    font-weight: 600;
    font-size: 14px;
    color: #303133;

    span {
        font-weight: 400;
        color: #606266;
    }
}

.alertPayVip1-h2 {
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-top: 12px;
    margin-bottom: 13px;
}

.alertPayVip1-table {
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    margin-top: 12px;

    .th {
        display: flex;
        height: 39px;
    }

    .tb {
        width: 33.333%;
        text-align: center;
        line-height: 39px;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        border-bottom: 1px solid #999999;
        border-right: 1px solid #999999;
    }
}
</style>
<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.main {
    position: fixed;
    top: 0;
    height: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.5);
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-content {
    width: 1110px;
    min-width: 1110px;
    height: 609px;
    background: #ffffff;
    border-radius: 30px;
    position: relative;
}

.close-pay {
    position: absolute;
    top: 28px;
    right: 38px;
    font-size: 36px;
    color: #606266;
    cursor: pointer;
}

.tabs1 {
    background-image: url(~/assets/images/userCenter/vip-pop-up-tabs-bj1.png);
}

.tabs0 {
    background-image: url(~/assets/images/userCenter/vip-pop-up-tabs-bj2.png);
}

.tabs2 {
    background-image: url(~/assets/images/userCenter/vip-pop-up-tabs-bj3.png);
}

.tabs3 {
    background-image: url(~/assets/images/userCenter/vip-pop-up-tabs-bj2.png);
}

.tabs {
    background-repeat: no-repeat;
    background-size: cover;
    height: 89px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    .tab {
        background-image: url(~/assets/images/userCenter/vip-pop-up-tab.png);
        background-size: 100% 100%;
        font-size: 24px;
        color: #666666;
        line-height: 32px;
        font-weight: 500;
        width: 294px;
        height: 61px;
        text-align: center;
        line-height: 61px;
        cursor: pointer;
    }

    .tab-active {
        background-image: url(~/assets/images/userCenter/vip-pop-up-tab-active.png);
        color: #333333;
        z-index: 10;
    }

    .tab1 {
        position: relative;
        left: 60px;
        z-index: 9;
    }

    .tab3 {
        position: relative;
        right: 60px;
        z-index: 9;
    }

    .tab2 {
        position: relative;
    }
}

.main-show {
    display: flex;
    justify-content: space-between;
}

.pay-code {
    width: 258px;
    min-width: 258px;
    border-left: 1px solid #f1f1f1;
    padding-top: 40px;
    height: 520px;

    .pay-code-title {
        padding: 0 37px;
        font-weight: 500;
        font-size: 22px;
        color: #333333;
    }

    .pay-code-type {
        display: flex;
        align-items: center;
        padding: 31px 30px 0;

        span {
            display: block;
            padding-left: 3px;
            font-weight: 500;
            font-size: 16px;
            color: #666666;
        }

        .icon {
            width: 20px;
            height: 20px;
            margin-right: 2px;
        }
    }

    .pay-code-code {
        margin: 35px 37px 0;
        padding: 18px;
        background-color: #e8f0ff;
        border-radius: 10px;

        div {
            width: 150px;
            height: 150px;
        }
    }

    .pay-number {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        text-align: center;
        padding-top: 32px;

        span {
            font-size: 12px;
            color: #ff5448;
        }
    }

    .old-price {
        text-decoration-line: line-through;
        font-weight: 500;
        font-size: 12px;
        color: #9c9c9c;
        text-align: center;
        padding-top: 8px;
    }

    .pay-code-agreement {
        font-weight: 400;
        font-size: 12px;
        color: #9e9e9e;
        text-align: center;
        padding-top: 24px;

        span {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

.tab-show-2 {
    display: flex;
    width: 100%;

    .member-benefits {
        width: 219px;
        min-width: 219px;
        height: 520px;
        background-color: rgba($color: #b8deff, $alpha: 0.1);
        padding-top: 23px;

        .title {
            font-weight: 500;
            font-size: 22px;
            color: #333333;
            text-align: center;

            img {
                width: 87px;
                height: 80px;
                display: block;
                margin: 0 auto 7px;
            }
        }

        .member-benefits-list {
            padding-top: 40px;

            img {
                width: 40px;
                height: 40px;
                display: block;
                margin-right: 8px;
            }

            .member-benefits-item {
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                display: flex;
                align-items: center;
                margin-bottom: 25px;
                padding-left: 38px;

                span {
                    font-weight: 400;
                    font-size: 12px;
                    color: #1e88f3;
                    padding-left: 8px;
                    cursor: pointer;
                }
            }
        }
    }

    .pay-vip-redemption {
        padding: 0 18px 0;
        width: 100%;

        .title {
            padding-top: 32px;
            font-weight: 500;
            font-size: 22px;
            color: #333333;
        }
    }

    .vip-list {
        padding-top: 20px;
        display: flex;

        // justify-content: space-between;
        .vip-item-active {
            border: 2px solid #1e88f3 !important;
        }

        .vip-item {
            width: 190px;
            height: 210px;
            border-radius: 5px;
            border: 2px solid #f3f7ff;
            padding: 33px 10px 0 15px;
            position: relative;
            cursor: pointer;
            text-align: center;
            margin-right: 20px;

            &:last-child {
                /* 你的样式 */
                margin-right: 0;
            }

            .day {
                font-weight: 500;
                font-size: 18px;
                color: #666666;
            }

            .remark {
                margin-top: 4px;
                font-size: 12px;
                color: #666666;

                span {
                    color: #ff5448;
                    font-weight: 600;
                    font-size: 14px;
                }
            }

            .money {
                display: flex;
                justify-content: center;
                align-items: flex-end;
                padding-top: 10px;

                .mmmm {
                    font-weight: 700;
                    font-size: 36px;
                }

                span {
                    color: #ff5448;
                    font-weight: 500;
                    font-size: 24px;
                }
            }

            .old-money {
                font-weight: 500;
                font-size: 12px;
                color: #9c9c9c;
                text-decoration-line: line-through;
                padding-right: 5px;
                margin-top: 20px;
            }

            .li {
                margin-top: 12px;
                display: flex;
                justify-content: center;
                line-height: 30px;
                font-size: 12px;
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                color: #333333;

                span {
                    margin-right: 5px;
                    width: 6px;
                    height: 6px;
                    background: #999999;
                    border-radius: 6px;
                    position: relative;
                    top: 12px;
                }
            }

            .tip {
                height: 23px;
                background: linear-gradient(90deg, #fd2016 0%, #ff7a59 100%);
                border-radius: 0px 5px 0px 20px;
                font-weight: 400;
                font-size: 12px;
                color: #ffffff;
                text-align: right;
                line-height: 20px;
                padding-right: 3px;
                padding-left: 9px;
                position: absolute;
                right: -1px;
                top: -1px;
            }
        }
    }

    .redemption {
        display: flex;
        align-items: center;
        padding-top: 22px;

        ::v-deep .el-input__inner {
            border-style: none;
            width: 390px;
            height: 43px;
            background: #f3f7ff;
            border-radius: 30px;
        }

        ::v-deep .el-input {
            width: 414px;
        }
    }
}

.codeSuccess {
    text-align: center;

    .codeIcon {
        width: 78px;
        height: 78px;
    }
}

.tab-show-1 {
    width: 100%;
    padding-top: 44px;
    padding-left: 63px;
    padding-right: 63px;

    .title {
        font-weight: 500;
        font-size: 22px;
        color: #333333;
        position: relative;

        span {
            font-weight: 400;
            font-size: 18px;
            color: #c2752e;
            padding-left: 16px;
        }

        div {
            font-weight: 400;
            font-size: 16px;
            color: #999999;
            position: absolute;
            right: 64px;
            bottom: 0;
            cursor: pointer;
        }
    }

    .coupon-list {
        display: flex;
        padding-top: 28px;

        .coupon-item-active {
            border: 1px solid #fcdcb2 !important;
        }

        .coupon-item {
            cursor: pointer;
            width: 226px;
            height: 119px;
            background: #ffffff;
            border-radius: 5px;
            border: 1px solid #eaeaea;
            padding-top: 19px;
            position: relative;
            margin-right: 24px;

            .num {
                width: 137px;
                height: 43px;
                background: #fdedd2;
                border-radius: 10px;
                text-align: center;
                margin-left: 34px;
                font-weight: 400;
                font-size: 22px;
                color: #4f2b0c;
                text-align: center;
                line-height: 43px;

                i {
                    font-size: 15px;
                }
            }

            .money {
                display: flex;
                align-items: flex-end;
                margin-left: 36px;

                span {
                    color: #ff5448;
                    font-weight: 500;
                    font-size: 24px;
                }

                div {
                    text-decoration-line: line-through;
                    font-weight: 500;
                    font-size: 12px;
                    color: #9c9c9c;
                    padding-left: 4px;
                    position: relative;
                    top: -7px;
                }
            }

            .tip {
                height: 23px;
                background: linear-gradient(90deg, #fd2016 0%, #ff7a59 100%);
                border-radius: 0px 5px 0px 20px;
                font-weight: 400;
                font-size: 12px;
                color: #ffffff;
                text-align: right;
                line-height: 20px;
                padding-right: 3px;
                padding-left: 9px;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
}

.tab-show-3 {
    width: 100%;
    padding: 30px 0 0 50px;

    .bamboo-title {
        display: flex;
        align-items: center;

        .text1 {
            font-weight: 500;
            font-size: 22px;
            color: #333333;
        }

        img {
            width: 20px;
            height: 20px;
        }

        .text2 {
            font-weight: 700;
            font-size: 22px;
            color: #ff5448;
            padding-left: 15px;
            padding-right: 30px;
        }

        .buttonttt {
            width: 73px;
            height: 31px;
            line-height: 31px;
            text-align: center;
            background: #00b578;
            border-radius: 32px;
            font-weight: 500;
            font-size: 18px;
            color: #f9f9f9;
            cursor: pointer;
        }
    }

    .line {
        width: calc(100% - 50px);
        height: 1px;
        background-color: #d8d8d8;
        margin: 37px 0;
    }

    .title {
        font-weight: 500;
        font-size: 22px;
        color: #333333;
    }

    .input {
        display: flex;
        align-items: center;
        position: relative;
        width: 390px;
        margin-top: 28px;

        ::v-deep .el-input__inner {
            border-style: none;
            width: 390px;
            height: 51px;
            background-color: rgba($color: #b8ddb1, $alpha: 0.2);
            border-radius: 30px;
            padding-left: 50px;
        }

        ::v-deep .el-input {
            width: 390px;
        }

        span {
            position: absolute;
            left: 22px;
        }

        .buttonttt {
            position: absolute;
            right: 13px;
            width: 73px;
            height: 31px;
            line-height: 31px;
            text-align: center;
            border-radius: 31px;
            font-size: 18px;
            color: #f9f9f9;
            cursor: pointer;
            background-color: #00b578;
        }
    }

    .combo-list {
        display: flex;
        align-items: center;
        padding-top: 47px;
    }

    .combo-item-active {
        border: 1px solid #00b578 !important;
    }

    .combo-item {
        margin-right: 33px;
        width: 226px;
        height: 119px;
        background: #ffffff;
        border-radius: 5px;
        border: 1px solid #eaeaea;
        padding-top: 18px;
        position: relative;
        cursor: pointer;

        .moeny {
            font-size: 24px;
            color: #ff5448;
            text-align: center;

            span {
                font-weight: 700;
                font-size: 36px;
                color: #ff5448;
            }
        }

        .combo {
            margin-top: 6px;
            font-weight: 500;
            font-size: 18px;
            color: #9c9c9c;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 20px;
                height: 20px;
                padding-right: 5px;
            }
        }

        .tip {
            height: 23px;
            background: linear-gradient(90deg, #fd2016 0%, #ff7a59 100%);
            border-radius: 0px 5px 0px 20px;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            text-align: right;
            line-height: 20px;
            padding-right: 6px;
            padding-left: 12px;
            position: absolute;
            right: -1px;
            top: -1px;
        }
    }

    .combo-tip {
        padding-top: 33px;
        font-size: 14px;
        color: #606266;
    }
}

.detailBox {
    padding: 0 30px 10px;
    height: 500px;
    margin-top: 10px;
    overflow: hidden;
    overflow-y: auto;

    .boo-tabs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 6px;
        position: sticky;
        top: 0;
        background-color: #ffffff;

        .boo-tab {
            width: 40px;
            text-align: center;
            text-align: #333;
            cursor: pointer;
            user-select: none;
            font-size: 16px;

            .line {
                width: 30px;
                height: 2px;
                background-color: #ffffff;
                border-radius: 1px;
                margin: 3px auto 0;
                // display: none;
            }
        }

        .boo-tab-active {
            color: #1c87f3;

            .line {
                background-color: #1c87f3;
            }
        }
    }

    .detailItem {
        padding-top: 10px;
        height: 60px;
        border-bottom: 1px solid #f1f1f1;

        .color1 {
            color: #fa5151;
        }

        .color2 {
            color: #67c23a;
        }

        .color3 {
            color: #909399;
        }
    }

    .title {
        margin-left: 120px;
        margin-bottom: 20px;
    }

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}

.PandaChannelEdition {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1002;

    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    video {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    i {
        position: fixed;
        top: 40px;
        right: 40px;
        font-size: 40px;
        color: #606266;
        cursor: pointer;
    }
}

.PandaChannelEdition2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    z-index: 999;

    .con-img {
        width: 583px;
        height: 683px;
    }

    .buts {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 35px;

        img {
            width: 211px;
            height: 65px;
            margin: 0 23px;
            cursor: pointer;
        }
    }
}

.fxjc-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px 37px 0;
}

.fxjc-item-s {
    box-shadow: 0px 0px 12px 0px #fcdcb2;
}

.fxjc-item {
    width: 279px;
    height: 119px;
    border-radius: 5px;
    // border: 1px solid #fcdcb2;
    padding-top: 18px;
    margin-bottom: 40px;
    cursor: pointer;
    position: relative;
    background-image: url(~/assets/images/riskdetection/paybj.png);
    background-size: 100% 100%;

    .fxjc-item-th {
        position: absolute;
        right: 0;
        top: 0;
        width: 53px;
        height: 24px;
        line-height: 24px;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        background: linear-gradient(230deg, #fd2016 0%, #ff7a59 100%);
        border-radius: 0px 5px 0px 20px;
    }

    .name {
        width: 216px;
        height: 43px;
        background: #ffeccb;
        border-radius: 10px;
        font-weight: 400;
        font-size: 20px;
        color: #4f2b0c;
        line-height: 43px;
        text-align: center;
        margin: 0 auto;
    }

    .moeny {
        width: 216px;
        margin: 0 auto;
        padding-top: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .m1 {
            font-weight: 500;
            font-size: 18px;
            color: #f03e32;
        }

        .m3 {
            font-weight: 700;
            font-size: 34px;
            color: #f03e32;
            width: 100%;
        }

        .m2 {
            font-weight: 500;
            font-size: 12px;
            color: #9c9c9c;
            text-wrap: nowrap;
        }
    }
}
</style>